<template>
    <div>
      <el-dialog
        title="参数配置"
        :visible.sync="dialogVisible"
        width="700px"
        :before-close="handleClose"
      >
        <div>
          <el-form
            ref="form"
            :model="form"
            :rules="rules"
            label-width="95px"
            :disabled="flag"
          >
            <el-row>
              <el-col :span="12">
                <el-form-item label="参数名称" prop="paraName">
                  <el-input
                    v-model="form.paraName"
                    placeholder="请输入参数名称"
                  />
                </el-form-item>
                
              </el-col>
              <el-col :span="12">
                <el-form-item label="序号" prop="paraNo1">
                  <el-input v-model="form.paraNo1" placeholder="请输入序号" />
                </el-form-item>
              </el-col>
              <!-- <el-col :span="12">
                <el-form-item label="设备类型" prop="typeID">
                  <el-cascader
                    :options="devices"
                    v-model="form.typeID"
                    :props="cascaderProps"
                    placeholder="请选择设备类型"
                  ></el-cascader>
                </el-form-item>
              </el-col> -->
            </el-row>
            <!-- <el-row v-if="!form.id">
              <el-col :span="12">
                <el-form-item label="序号" prop="paraNo1">
                  <el-input v-model="form.paraNo1" placeholder="请输入序号" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="参数分类" prop="paraType">
                  <el-radio v-model="form.paraType" label="1">遥信量</el-radio>
                  <el-radio v-model="form.paraType" label="2">遥测量</el-radio>
                </el-form-item>
              </el-col>
            </el-row> -->
  
            <el-row v-show="form.paraType == 1">
              <el-col :span="12">
                <el-form-item label="报警水平" prop="warnType">
                  <el-input
                    v-model="form.warnType"
                    placeholder="请输入报警水平"
                  />
                </el-form-item>
              </el-col>
            </el-row>
  
            <el-row v-show="form.paraType == 2">
              <el-col :span="12">
                <el-form-item label="单位" prop="sign">
                  <el-input v-model="form.sign" placeholder="请输入设备名称" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="提醒下限" prop="paraIniValue">
                  <el-input
                    v-model="form.paraIniValue"
                    placeholder="请输入设备名称"
                  />
                </el-form-item>
              </el-col>
            </el-row>
  
            <el-row v-show="form.paraType == 2">
              <el-col :span="12">
                <el-form-item label="下限" prop="paraMinValue">
                  <el-input
                    v-model="form.paraMinValue"
                    placeholder="请输入设备名称"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="上限" prop="paraMaxValue">
                  <el-input
                    v-model="form.paraMaxValue"
                    placeholder="请输入设备名称"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-form-item label="安装图片" prop="img">
                <el-upload
                  :limit="1"
                  class="upload-demo"
                  :action="upload.url"
                  :headers="upload.headers"
                  :before-upload="handlebefore"
                  :on-change="uploadChange"
                  :file-list="fileList"
                  list-type="picture"
                >
                  <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
              </el-form-item>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="备注" prop="note">
                  <el-input
                    v-model="form.note"
                    type="textarea"
                    placeholder="请输入内容"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row >
              <el-col :span="12">
                <el-form-item label="可用性" prop="status">
                  <el-radio v-model="form.status" :label="1">可用</el-radio>
                  <el-radio v-model="form.status" :label="0">不可用</el-radio>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="formpost" v-if="!flag"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </template>
  <script>
  import { listGroup, insterDef, updateDef } from "@/api/system/imei";
  import { getToken } from "@/utils/auth";
  export default {
    data() {
      return {
        dialogVisible: false,
        form: {
          typeID: "",
        },
        fileList : [],
        devices: [],
        cascaderProps: {
          value: "typeID",
          label: "groupName",
        },
        upload: {
          // 设置上传的请求头部
          headers: {
            Authorization: "Bearer " + getToken(),
          },
          // 图片上传的方法地址:
          url: process.env.VUE_APP_BASE_API + "/system/manage/upload",
        },
        rules: {
          paraName: [
            { required: true, message: "设备名称不能为空", trigger: "blur" },
          ],
          typeID: [
            { required: true, message: "设备类型不能为空", trigger: "blur" },
          ],
          paraNo1: [{ required: true, message: "序号不能为空", trigger: "blur" }],
          paraType: [
            { required: true, message: "参数分类不能为空", trigger: "blur" },
          ],
        },
        flag: false,
      };
    },
    methods: {
      handleClose(done) {
        done();
      },
      init(data, flag,yid,yfalg) {
        this.flag = false
        this.fileList = []
        this.form = {}
        this.form.typeID = yid
        this.form.paraType = yfalg
        if (data.id) {
          this.form = data;
  
          this.flag = flag;
          if(this.form.img !== null){
            this.fileList = [{ url:this.form.img}]
          }
         
          console.log('sss',this.devices);
        }
        this.dialogVisible = true;
        listGroup().then((res) => {
          this.devices = res.rows;
          
        });
      },
      formpost() {
        this.$refs["form"].validate((valid) => {
          if (valid) {
            if (typeof this.form.typeID == "object") {
              this.form.typeID = this.form.typeID[0];
            }
            if (this.form.id) {
              updateDef(this.form).then((res) => {
                if (res.code == 200) {
                  this.$message({
                    message: "更新成功",
                    type: "success",
                  });
                  this.dialogVisible = false
                  this.$emit('gx')
                }
              });
            } else {
              insterDef(this.form).then((res) => {
                if (res.code == 200) {
                  this.$message({
                    message: "新增成功",
                    type: "success",
                  });
                  this.dialogVisible = false
                  this.$emit('gx')
                }
              });
            }
          }
        });
      },
  
      handlebefore(file) {
        console.log('file',file);
      },
  
      uploadChange(file, fileList) {
        console.log(123, fileList);
        this.form.img = fileList[0].response;
      },
    },
  };
  </script>